<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules" label-width="90px">
				<view class="box">
					<uni-forms-item required label="分组" name="group_id">
						<picker @change="bindGroup" :range="group" range-key="group_name">
							<view class="picker-input">
								{{ group_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="楼栋名字" name="building_name">
						<uni-easyinput type="text" v-model="FormData.building_name" :clearable="false" placeholder="请输入楼栋名字" />
					</uni-forms-item>
					<uni-forms-item required label="总层数" name="floor_total">
						<uni-number-box v-model="FormData.floor_total" :min="1" :max="99" @change="bindTotal" />
					</uni-forms-item>
					<uni-forms-item required label="每层房间数" name="number">
						<uni-number-box v-model="FormData.number" :min="1" :max="99" @change="bindNumber" />
					</uni-forms-item>
					<uni-forms-item label="房间号前缀" name="pre">
						<uni-easyinput type="text" v-model="FormData.pre" maxlength="1" :clearable="false" placeholder="请输入1位字母或数字" @input="bindPre" />
					</uni-forms-item>
				</view>
				<view class="box small">
					<block v-for="(item, index) in FormData.floor_rooms" :key="index">
						<view class="floorRoom">
							<view class="label label1">所在楼层</view>
							<uni-number-box
								v-model="item.floor_no"
								:min="1"
								:max="99"
								@change="
									(value) => {
										bindFloor(index, value);
									}
								"
							/>
							<view class="label label2">房间数</view>
							<uni-number-box
								v-model="item.room_total"
								:min="1"
								:max="99"
								@change="
									(value) => {
										bindFloorTotal(index, value);
									}
								"
							/>
							<view class="delete" v-if="FormData.floor_rooms.length > 1" @click="del(index)">
								<uni-icons type="minus" size="24" color="#e43d33"></uni-icons>
							</view>
							<view class="delete" v-else></view>
						</view>
						<view class="roomNo">
							<view class="label">房间号</view>
							<view class="value">
								{{ item.rooms_no }}
							</view>
						</view>
					</block>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			group_name: '',
			group: [],
			FormData: {
				group_id: '',
				building_name: '',
				floor_total: 1,
				number: 1,
				pre: '',
				floor_rooms_data: '',
				floor_rooms: [{ floor_no: 1, room_total: 1, rooms_no: '101' }]
			},
			rules: {
				group_id: {
					rules: [
						{
							required: true,
							errorMessage: '请选择分组'
						}
					],
					validateTrigger: 'submit'
				},
				building_name: {
					rules: [
						{
							required: true,
							errorMessage: '请输入楼栋名字'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onLoad() {
		this.getGroup();
	},
	methods: {
		bindGroup(e) {
			this.FormData.group_id = this.group[e.detail.value].id;
			this.group_name = this.group[e.detail.value].group_name;
		},
		bindTotal(num) {
			this.FormData.floor_total = num;
			var date = this.FormData.floor_rooms;
			var lengths = this.FormData.floor_rooms.length;
			var newNum = num - lengths;
			if (lengths > num) {
				// 减少
				this.FormData.floor_rooms = date.slice(0, newNum);
			} else {
				// 增加
				for (let i = lengths; i < num; i++) {
					var base = {
						floor_no: i + 1,
						room_total: this.FormData.number
					};
					var rooms = [];
					for (let j = 0; j < base.room_total; j++) {
						var two = this.addZero(j);
						var roomsone = this.FormData.pre + base.floor_no + two;
						rooms.push(roomsone);
					}
					base.rooms_no = rooms.join(',');
					date.push(base);
				}
			}
		},
		bindNumber(num) {
			this.FormData.number = num;
			var date = [];
			for (let i = 0; i < this.FormData.floor_total; i++) {
				var base = {
					floor_no: i + 1,
					room_total: num
				};
				var rooms = [];
				for (let j = 0; j < base.room_total; j++) {
					var two = this.addZero(j);
					var roomsone = this.FormData.pre + base.floor_no + two;
					rooms.push(roomsone);
				}
				base.rooms_no = rooms.join(',');
				date.push(base);
			}
			this.FormData.floor_rooms = date;
		},
		bindPre(e) {
			const reg = /^[a-z0-9A-Z]+$/;
			if (!e || reg.test(e)) {
				var oldDate = this.FormData.floor_rooms;
				for (let i = 0; i < oldDate.length; i++) {
					var oldDetail = oldDate[i].rooms_no;
					var oldDetailArr = oldDetail.split(',');
					var rooms = [];
					for (let j = 0; j < oldDetailArr.length; j++) {
						var two = this.addZero(j);
						var roomsone = this.FormData.pre + oldDate[i].floor_no + two;
						rooms.push(roomsone);
					}
					oldDate[i].rooms_no = rooms.join(',');
				}
				this.FormData.floor_rooms = oldDate;
			} else {
				this.$nextTick(() => {
					this.FormData.pre = '';
				});
			}
		},
		bindFloor(index, value) {
			this.FormData.floor_rooms[index].floor_no = value;
			var rooms = [];
			for (let j = 0; j < this.FormData.floor_rooms[index].room_total; j++) {
				var two = this.addZero(j);
				var roomsone = this.FormData.pre + value + two;
				rooms.push(roomsone);
			}
			this.FormData.floor_rooms[index].rooms_no = rooms.join(',');
		},
		bindFloorTotal(index, value) {
			this.FormData.floor_rooms[index].room_total = value;
			var rooms = [];
			for (let j = 0; j < value; j++) {
				var two = this.addZero(j);
				var roomsone = this.FormData.pre + this.FormData.floor_rooms[index].floor_no + two;
				rooms.push(roomsone);
			}
			this.FormData.floor_rooms[index].rooms_no = rooms.join(',');
		},
		del(index) {
			this.FormData.floor_rooms.splice(index, 1);
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				var roomData = this.FormData.floor_rooms;
				var roomArr = [];
				for (let i = 0; i < roomData.length; i++) {
					roomArr.push(roomData[i].floor_no);
				}
				if (new Set(roomArr).size !== roomArr.length) {
					uni.showToast({
						title: '楼层不能重复',
						icon: 'none'
					});
				} else {
					this.FormData.floor_rooms_data = JSON.stringify(roomData);
					const data = Object.assign({}, this.FormData);
					api.buildAdd(data).then((res) => {
						if (res.data.is_success) {
							uni.showToast({
								title: '添加成功'
							});
							setTimeout(() => {
								uni.hideToast();
								uni.navigateBack();
							}, 1000);
						} else {
							uni.showToast({
								title: '添加失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				this.group = data.data;
				this.FormData.group_id = this.group[0].id;
				this.group_name = this.group[0].group_name;
			});
		},
		addZero(num) {
			return String(num + 1).padStart(2, 0);
		}
	}
};
</script>

<style lang="scss">
.small {
	.floorRoom {
		height: 70rpx;
		display: flex;
		padding: 20rpx 0;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		.label {
			font-size: 28rpx;
			color: #606266;
			&.label1 {
				width: 130rpx;
			}
			&.label2 {
				width: 100rpx;
			}
		}
		.picker-input {
			height: 60rpx;
			width: 150rpx;
			text-align: center;
			line-height: 60rpx;
			border: 1rpx solid $uni-border-3;
			border-radius: 10rpx;
		}
		.delete {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.roomNo {
		height: 50rpx;
		display: flex;
		padding: 20rpx 0;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		.label {
			font-size: 28rpx;
			color: #606266;
			width: 130rpx;
		}
		.value {
			flex: 1;
			font-size: 28rpx;
			text-align: right;
			padding-right: 20rpx;
			color: $uni-secondary-color;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
</style>
